<script setup>
import { ref, reactive } from "vue";
const p = ref("p");
const message = ref("");
const checked = ref(true);
const checkedNames = ref(["Jack", "Tome"]);
const picked = ref();
const selected = ref(["B"]);
const radioValue = ref("a");
const pick = ref("second");
const toggle = ref(true);
const se= reactive({name: "york"})

const options = ref([
  { id: 1, text: "One", value: "A" },
  { id: 2, text: "Two", value: "B" },
  { id: 3, text: "Three", value: "C" },
]);

 
</script>

<template>
  <input v-model="message" type="text" placeholder="Please type here" />
  <p :class="p">Message is: {{ message }}</p>
  <span>Multiline message is: </span>
  <p style="white-space: pre-line">{{ message }}</p>
  <textarea v-model="message" placeholder="add multi lines"></textarea>
  <br />
  <strong>强调一下</strong>
  <br />
  <input type="checkbox" id="checkbox" v-model="checked" />
  <!-- <label for="checkbox" style="color: blue;">{{ checked }}</label> -->

  <!--多个checkbox的形式  -->
  <div style="color: red">
    Names: {{ checkedNames }}
    <br />
    <input type="checkbox" id="jack" value="Jack" v-model="checkedNames" />
    <label for="jack">Jack</label>
    <input type="checkbox" id="tom" value="Tom" v-model="checkedNames" />
    <label for="tom">Tom</label>
    <input type="checkbox" id="john" value="John" v-model="checkedNames" />
    <label for="john">John</label>
  </div>

  <div style="color: blue">
    Checked: {{ picked }}
    <br />
    <input type="radio" value="One" id="one" v-model="picked" />
    <label for="one">One</label>
    <input type="radio" value="Two" id="one" v-model="picked" />
    <label for="two">Two</label>
  </div>

  <div style="color: green">
    Selected: {{ selected }}
    <br />
    <select v-model="selected" multiple>
      <option disabled value="">Please select one</option>
      <option>A</option>
      <option>B</option>
      <option>C</option>
    </select>
  </div>

  <div style="color: pink">
    Selected: {{ selected }}
    <select v-model="selected" multiple>
      <option v-for="option in options" :key="option.id" :value="option.value">
        {{ option.text }}
      </option>
    </select>
  </div>
  <input type="radio" v-model="radioValue" value="a" />
  <input type="checkbox" v-model="toggle" />
  <select v-model="selected">
    <option value="abc">ABC</option>
  </select>

  <input
    type="checkbox"
    v-model="toggle"
    :true-value="true"
    :false-value="false"
  />
  <div>
    <input type="radio" id="first" v-model="pick" value="first" />
    <label for="first">First</label>
    <input type="radio" id="second" v-model="pick" value="second" />
    <label for="second">Second</label>
  </div>
  <select v-model.lazy="se">
    <option :value="{ name: 'york' }">York</option>
  </select>
</template>


<style scoped>
.p {
  color: red;
  box-shadow: 0dvi;
}
</style>

